import './countToNum.less';

const countToNum = {
  name: 'countToNum',
  data(){
    return {
      computeNumber: []
    }
  },
  props:{
    number:{
      type: Number,
      required: true,
    },
    title:{
      type:String,
      default: ''
    }
  },
  watch:{
    files:{
      handler(val){
        // console.log('title',val);
      },
      deep:true
    },
    number: {
      handler: async function(){
        
        let number = this.number.toLocaleString();
        this.computeNumber = number.split('');
        await this.$nextTick();
        this.setNumberTransform();
      },
      immediate: true
    }
  },
  methods:{
    // 设置每一位数字的偏移
    setNumberTransform () {
      let numberItems = this.$refs.numberItem
      let numberArr = this.computeNumber.filter(item => !isNaN(item))
      if(numberItems && numberItems.length > 0){
        for (let index = 0; index < numberItems.length; index++) {
          let elem = numberItems[index]
          elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
        }
      }
    }
  },
  render(h) {
    return h('ul',{
      attrs: {
        id: 'count-box'
      }
    },[
      this.computeNumber.map((item,index) => {
        return h('li',{
          'class': {
            'number-item': !isNaN(item),
            'comma-item': isNaN(item)
          },
          key: index
        },[
          !isNaN(item)?
            h('span',[
              h('i',{
                ref: 'numberItem',
                refInFor: true
              },'0123456789')
            ]):
            h('span',item)
        ])
      })
    ])
  },
};

export default countToNum
